<template>
  <div class="box">
    <div class="header">
      <h3 class="head-font">客流监控</h3>
      <span @click="showPicker">{{spanText}}<van-icon name="arrow-down" /></span>
    </div>
    <div class="num-box">
      <div v-for="( item, index ) in list" :key="index">
        <p class="head-font">{{item.num}}</p>
        <span>{{item.title}}</span>
      </div>
    </div>
    <div class="chart-box">
      <h3 class="tit-font">入园时段客流分析</h3>
      <div id="mychart1" class="my-chart"></div>
    </div>
    <!--日期选择-->
    <van-popup v-model="isShowPop"  position="bottom">
      <van-datetime-picker
        visible-item-count="3"
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirm"
        @cancel="cancel"
      />
    </van-popup>

  </div>
</template>

<script>
export default {
  name: 'TrafficMonitor',
  data () {
    return {
      isShowPop: false,
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      spanText: new Date(),
      list: [{ title: '当日入园数', num: 15643 }, { title: '当日售票数', num: 24567 }, { title: '实时在园数', num: 9846 }],
      timeData: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00'],
      numData: ['175', '265', '426', '395', '365', '284', '396', '264', '158', '98', '48']
    }
  },
  mounted () {
    this.drawLine()
    this.setSpanText()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('mychart1'))

      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: '0',
          left: '-2%',
          right: '6%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: this.timeData,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#999',
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(202,202,204,0.5)'
            }
          },
          axisTick: {
            show: false
          }
        }],
        yAxis: [{
          show: false,
          type: 'value'

        }],
        series: [
          {
            name: '客流量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            itemStyle: {
              normal: { // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(125,69,197,0.6)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(125,69,197,00)' // 100% 处的颜色
                }]), // 背景渐变色
                lineStyle: { // 系列级个性化折线样式
                  width: 1,
                  type: 'solid',
                  color: '#7D45C5'
                }
              }
            }, // 线条样式
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#7D45C5',
                fontFamily: 'DIN-Medium'
              }
            },
            symbolSize: 6, // 折线点的大小
            areaStyle: {
              normal: {}
            },
            data: this.numData
          }
        ]
      }
      myChart.setOption(option)
    },
    showPicker () {
      this.isShowPop = true
    },
    // 今天是几号
    getDate (value) {
      if (value) var date = new Date(value)
      else date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var dates = date.getDate()
      month = month > 10 ? month : '0' + month
      dates = dates > 10 ? dates : '0' + dates
      return year + '-' + month + '-' + dates
    },
    // 初始化currentDate 默认为今天
    setSpanText () {
      this.spanText = this.getDate()
    },
    confirm (value) {
      this.currentDate = this.getDate(value)
      this.spanText = this.getDate(value)
      this.isShowPop = false
    },
    cancel () {
      this.isShowPop = false
    }
  }
}
</script>

<style lang="less" scoped>
.header{
  height: 90/7.5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  >h3{
    font-size: 48/7.5vw;
  }
  >span{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60/7.5vw;
    padding: 0 24/7.5vw;
    line-height: 60/7.5vw;
    border-radius: 30/7.5vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 28/7.5vw;
    color: #666;
    text-align: center;
    background-color: rgba(125,69,197,.15);
  }
}
.num-box{
  height: 190/7.5vw;
  margin-top: 72/7.5vw;
  margin-bottom: 30/7.5vw;
  border-radius: 4/7.5vw;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  >div{
    flex: 1;
    text-align: center;
    &:nth-of-type(1){
      >p{
        color: #7D45C5;
      }
    }
    &:nth-of-type(2){
      >p{
        color: #E67050;
      }
    }
    >span{
      font-size: 28/7.5vw;
      color: #999;
    }
  }
}
.chart-box{
  background-color: #fff;
  padding:40/7.5vw 0;
  >h3{
    padding:0 30/7.5vw;
    margin-bottom: 80/7.5vw;
  }
  .my-chart{
    height: 500/7.5vw;
  }
}
</style>
<style lang="less">
  .van-picker__columns{
    margin:50/7.5vw 0;
  }
</style>
